<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: 'VIP等级',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="22px"></wd-icon>
    </view>
    <view class="vip-title">VIP会员成长体系</view>
    <view class="vip-container">
      <image src="/static/images/my/vip/vipLogo.png" class="vip-logo" />
      <view class="vipText">
        <view class="vipTop">
          <view class="vipTopLeft">
            <view class="avatar-container">
              <image class="avatar" src="/static/images/my/vip/avatar.png" />
            </view>
          </view>
          <view class="userName">{{ userInfo.userName }}</view>
          <view class="level">VIP{{ userInfo.vip }}</view>
        </view>
        <view class="vipBottom">
          <view class="vipBottomTitle">积累能量自动升级</view>
          <view class="energyValue">能量值 280/300</view>
        </view>
      </view>
    </view>
    <!-- VIP等级进度条 -->
    <view class="vip-progress-container">
      <wd-steps :active="active" :dot="true" align-center>
        <wd-step title="   " />
        <wd-step title="VIP1" />
        <wd-step title="VIP2" />
        <wd-step title="VIP3" />
        <wd-step title="   " />
      </wd-steps>
    </view>
    <!-- 主要内容区域 -->
    <view class="rules-content">
      <image src="/static/images/my/vip/rankBg.png" class="rules-bg-image" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const userInfo = userStore.userInfo
const active = ref<number>(2)
// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
/* 容器样式 */
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  overflow: hidden;
  padding: 20rpx;
}

/* 返回按钮 */
.back-button {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  color: #ffffff;
  font-size: 32rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .back-icon {
    margin-right: 8rpx;
    font-size: 28rpx;
  }
}
.vip-title {
  font-size: 35rpx;
  font-weight: bold;
  color: #ffffff;
  margin-top: 70rpx;
  padding: 0 30rpx;
}
.vip-container {
  width: 100%;
  height: 275rpx;
  margin-top: 20rpx;
  position: relative;
  .vip-logo {
    width: 100%;
    height: 100%;
  }
  .vipText {
    width: 100%;
    position: absolute;
    top: 15rpx;
    left: 0;
    .vipTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .vipTopLeft {
        flex: 0.4;
        .avatar-container {
          position: relative;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-left: 95rpx;
          .avatar {
            width: 100%;
            height: 100%;
          }
        }
      }
      .userName {
        font-size: 32rpx;
        color: #ffffff;
        margin-top: 60rpx;
        flex: 0.5;
      }
      .level {
        font-size: 32rpx;
        color: #ffff00;
        margin-top: 60rpx;
        flex: 0.2;
        margin-left: 20rpx;
      }
    }
    .vipBottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .vipBottomTitle {
        font-size: 32rpx;
        color: #ffffff;
        margin-top: 60rpx;
        margin-left: 40rpx;
      }
      .energyValue {
        font-size: 32rpx;
        color: #7a5323;
        margin-top: 60rpx;
        text-align: right;
        margin-right: 40rpx;
      }
    }
  }
}
.vip-progress-container {
  margin-top: 50rpx;
  width: 100%;
  > wd-steps {
    width: 100%;
  }
  .wd-step__dot {
    background: #d1ceb6 !important;
  }
  .wd-step__line {
    background: #d1ceb6 !important;
    height: 6rpx !important;
  }
  .wd-step__icon.is-dot {
    width: 20rpx !important;
    height: 20rpx !important;
  }

  .wd-step__title {
    font-size: 32rpx;
    color: #d1ceb6 !important;
  }
  &:nth-child(2) .wd-step__title {
    font-size: 20rpx;
  }
}
/* 主要内容区域 */
.rules-content {
  margin-top: 50rpx;
  width: 100%;
  height: 500rpx;
  position: relative;
  .rules-bg-image {
    width: 100%;
    height: 100%;
  }
}
</style>
